<template>
  <div class="about">
    <van-cell-group inset v-if="isFuncShow">
      <router-link :to="{ name: 'Updata'}">
        <van-cell title="更新日志" value=""
        is-link
        />
      </router-link>
      <van-cell title="关于本站" value="" is-link/>
    </van-cell-group>
    <router-view></router-view>
  </div>
</template>
<style lang="scss" scoped>
  .about{
    margin-top: 10px;
    height: 100%;
    width: 100%;
    background-color: #f7f8fa;
  }
</style>
<script>
import { onMounted, ref } from '@vue/runtime-core'
import { useStore } from 'vuex'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
export default {
  setup () {
    const store = useStore()
    const route = useRoute()
    const isFuncShow = ref(true)

    onMounted(() => {
      store.commit('changeNavAboutIsClose')

      if (route.path !== '/about') {
        isFuncShow.value = false
      } else {
        store.commit('changeNavTitleText', '九耀 · 关于')
      }
    })

    onBeforeRouteUpdate((to, from, next) => {
      if (to.fullPath === '/about') {
        isFuncShow.value = true
        store.commit('changeNavTitleText', '九耀 · 关于')
      } else {
        isFuncShow.value = false
      }
      next()
    })

    return {
      isFuncShow,
      onBeforeRouteUpdate

    }
  }
}
</script>
